<template>
  <div class="article-list">
    <van-list @load="enLoad">
      <van-cell-group>
        <van-cell v-for="(article, index) in list" :key="index">
          <div class="listImg">
            <img :src="article.avatarUrl" alt="" />
          </div>
          <div class="listText">
            <span>{{ article.nickname }}</span>
            <span>{{ article.signature }}</span>
          </div>
        </van-cell>
      </van-cell-group>
    </van-list>
  </div>
</template>

<script>
import { getUserfans } from '@/api/user'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      list: []
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created () {},
  mounted () {},
  methods: {
    async enLoad () {
      // console.log(this.uid)
      // const { data } = await Mylist({ uid: this.uid, type: this.type })
      const uid = this.userInfo.userId
      const { followeds } = await getUserfans(uid)
      this.list.push(...followeds)
      console.log(this.list)
    }
  }
}
</script>

<style scoped lang="less">
.custom-title {
  margin-right: 4px;
  vertical-align: middle;
}
/deep/.xiao {
  font-size: 12px !important;
  color: #999;
}
.search-icon {
  font-size: 16px;
  line-height: inherit;
}
/deep/ .van-icon-play-circle-o {
  margin-right: 20px;
  font-size: 40px;
}
/deep/ .van-icon-ellipsis {
  font-size: 40px;
}
/deep/ .van-cell {
  .listImg {
    float: left;
    width: 100px;
    height: 100px;
    img {
      border-radius: 50%;
      width: 100%;
      height: 100%;
    }
  }
  .listText {
    width: 500px;
    margin-left: 20px;
    padding: 10px;
    float: left;
  }
}

span {
  font-size: 24px;
  overflow: hidden;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}
</style>
